<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>user</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <style>
        .page {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
        }

        .user_box {
            display: flex;
            flex-direction: column;
            height: 150px;
            justify-content: center;
            position: relative;
        }

        .user_bg {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .user_wrap {
            display: flex;
            margin-bottom: 25px;
            flex-direction: row;
            align-items: center;
            height: 60px;
            z-index: 2;
        }

        .user_logo {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-left: 20px;
            background-color: #f8f8f8;
        }

        .user_name {
            flex: 1;
            font-size: 17px;
            color: white;
            margin: 0 15px;
        }

        .user_gor {
            width: 16px;
            height: 16px;
            margin-right: 20px;
        }

        .user-order {
            position: relative;
            margin: -40px 15px 0 15px;
        }

        .content_item_box {
            border-radius: 4px;
            background-color: white;
            margin-bottom: 10px;
            padding: 0 10px;
        }

        /* order */
        .title_box {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #f8f8f8;
            height: 40px;
        }

        .title_gor {
            width: 10px;
            height: 10px;
        }

        .title_zi {
            font-size: 14px;
            color: #333333;
            font-weight: bold;
        }

        .user_btn_box {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
            height: 80px;
        }

        .user_btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
        }

        .btn_icon {
            width: 24px;
            height: 24px;
        }

        .btn_zi {
            font-size: 12px;
            color: #333333;
        }

        .user_red {
            position: absolute;
            height: 12px;
            line-height: 12px;
            text-align: center;
            font-size: 11px;
            background-color: red;
            color: #fff;
            border-radius: 6px;
            right: 0;
            top: -6px;
            padding: 0 3px;
        }

        .user-menu {
            border-radius: 4px;
            background-color: white;
            padding: 0 10px;
            margin: 0 15px;
        }

        .menu_item_box {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #f8f8f8;
            height: 49px;
        }

        .menu_item_box:active {
            opacity: 0.7;
        }

        .title_menu_zi {
            font-size: 14px;
            color: #333333;
        }
    </style>
</head>

<body>
    <div class="page">
        <div class="nav-bar">
            <span class="nav-bar-title">我的</span>
        </div>
        <div class="scroll-view-y">
            <!-- 用户信息 -->
            <div class="user-card">
                <div class="user_box">
                    <img class="user_bg"
                        src="../images/linkImg/9f2f2379e0d71466281f3b2decbcb5af.png" />
                    <div class="user_wrap">
                        <img class="user_logo"
                            src='../images/linkImg/46e4b8d7a4a8d1febeec082516a8e8f5.png'
                            mode="aspectFill" />
                        <span class="user_name">测试账号</span>
                        <img class="user_gor"
                            src="../images/main4/gor2.png" />
                    </div>
                </div>
            </div>
            <!-- 我的订单 -->
            <div class="user-order">
                <div class="content_item_box">
                    <div class="title_box">
                        <span class="title_zi">我的订单</span>
                        <img class="title_gor"
                            src="../images/main1/gor_1.png" />
                    </div>
                    <div class="user_btn_box"></div>
                </div>
            </div>
            <!-- 信息列表 -->
            <div class="user-menu"></div>
        </div>

    </div>
</body>
<script src="../script/api.js"></script>
<script>
    apiready = function () {
        $api.fixStatusBar($api.dom('.nav-bar'));
    }

    let orderState = [{
        icon: '../images/main4/order_1.png',
        title: '待付款',
        type: 1
    }, {
        icon: '../images/main4/order_2.png',
        title: '待发货',
        type: 2
    }, {
        icon: '../images/main4/order_3.png',
        title: '待收货',
        type: 4
    }, {
        icon: '../images/main4/order_4.png',
        title: '已完成',
        type: 5
    }, {
        icon: '../images/main4/order_5.png',
        title: '售后',
        type: 0
    }]

    getStateContent(1)
    function getStateContent(active) {
        let str = '';
        orderState.forEach((item, index) => {
            str += `
            <div class="user_btn" onclick="fnOrderList(${item.type})">
                <img class="btn_icon" src="${item.icon}"/>
                <span class="btn_zi">${item.title}</span>
                ${active != '' && active == index ? '<span class="user_red">1</span>' : ''}
               
            </div>
            `
        })
        document.querySelector('.user_btn_box').innerHTML = str;
    }

    function fnOrderList(param) {
        api.openWin({
            name: 'order_list',
            url:'./order_list.html',
            pageParam: {
                index: param
            }
        })
    }


    let menuList = [
					{
					  "title": "收货地址"
					},
					{
					  "title": "关于我们"
					}
				  ]
    getMenuContent(1)
    function getMenuContent(active) {
        let str = '';
        menuList.forEach((item, index) => {
            str += `
            <div class="menu_item_box" onclick="onItemClick(${index})">
                <span class="title_menu_zi">${item.title}</span>
                <img class="title_gor" src="../images/main1/gor_1.png" />
            </div>
            `
        })
        document.querySelector('.user-menu').innerHTML = str;
    }

    function onItemClick(param) {
        let name, url;
        if(param === 0) {
            name = 'address'
            url = './address_list.html'
        }else if(param === 1) {
            name = 'about'
            url="./about.html"
        }
       api.openWin({
           name,
           url
       })
    }

</script>

</html>